<template>
  <div>
    <el-table>
      :data="tableData"  <!--v-bind进行缩写简写-->
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址" >
      </el-table-column>
    </el-table>
      <el-pagination
        :page-size="pageSize"
        :pager-count="currentPage"
        layout="prev, pager, next"
        align="right"
        :total="totals"
        @current-change="begain">  //当前页，改变时就会触发

      </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{//写的这需要和html的页面取值相互对应，并且能取上值才行
      pageSize:5, //在页面展示的条数是5条   原本是page-size我们把-转化成了pageSize
      currentPage:1, //当前页是1
      totals:0, //条数是几条
      tableData:[]//表格返回的数据是几条就是几条
    }
  },
  methods: {//填写一个方法
    begain(curr){
      this.currentPage=curr;  //this指代当前的对象,代表我们要拿取到这个值
      this.page()//调用共用的方法
    },
    page(){
      //1.先写axious
      //2.写mock  获取模拟接口
      this.$http.post("/user/list",{"currentPage":this.currentPage,"pageSize":this.pageSize})
      .then(result=>{
        this.tableData=result.data.rows
        this.totals=result.data.totals
      })
      .catch(result=>{
        alert("报错w")
      })
    }
  },
  mounted() {//再写一个钩子函数  钩子函数调用接口，页面初始化的时候去调用 添加钩子函数发送ajax请求
    this.page()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
